<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title> - 主页示例</title>
    <link rel="shortcut icon" href="https://cdn.p00q.cn/favicon.ico">
    <link href="https://cdn.p00q.cn/hAdmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="https://cdn.p00q.cn/hAdmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.p00q.cn/hAdmin/css/animate.css" rel="stylesheet">
    <link href="https://cdn.p00q.cn/hAdmin/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-10">
            <div class="row">
                <div class="col-sm-4">
                    <div class="row row-sm text-center">
                        <div class="col-xs-6">
                            <div class="panel padder-v item">
                                <div class="h1 text-info font-thin h1" th:text="${yssize}">521</div>
                                <span class="text-muted text-xs">影视数量</span>
                                <div class="top text-right w-full">
                                    <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item bg-info">
                                <div class="h1 text-fff font-thin h1" th:text="${usersize}">521</div>
                                <span class="text-muted text-xs">用户数量</span>
                                <div class="top text-right w-full">
                                    <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item bg-primary">
                                <div class="h1 text-fff font-thin h1" th:text="${totalAccess}"></div>
                                <span class="text-muted text-xs">总访问</span>
                                <div class="top text-right w-full">
                                    <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item">
                                <div class="font-thin h1" th:text="${dayAccess}"></div>
                                <span class="text-muted text-xs">今日访问</span>
                                <div class="bottom text-left">
                                    <i class="fa fa-caret-up text-warning m-l-sm"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="https://cdn.p00q.cn/hAdmin/js/jquery.min.js?v=2.1.4"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/plugins/layer/layer.min.js"></script>
<!-- Flot -->
<script src="https://cdn.p00q.cn/hAdmin/js/plugins/flot/jquery.flot.js"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/plugins/flot/jquery.flot.pie.js"></script>
<!-- 自定义js -->
<script src="https://cdn.p00q.cn/hAdmin/js/content.js"></script>
<script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.js"></script>
<script type="text/javascript" th:inline="javascript">
    Chart.defaults.global.elements.point.radius=5;
    Chart.defaults.global.elements.point.pointStyle="triangle";
    Chart.defaults.global.elements.point.borderColor="#FFFF33";
    Chart.defaults.global.elements.point.backgroundColor="#FF3300";
    Chart.defaults.global.elements.line.tension=0.4;
    Chart.defaults.global.elements.line.backgroundColor='rgba(	175,238,238, 0.5)';
    var ctx = document.getElementById("myChart")
    /*<![CDATA[*/
    var labels = /*[[${times}]]*/ null;
    var data = /*[[${is}]]*/ null;
    /*]]>*/
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: eval(labels),
            datasets: [{
                label: '最近30天访问量',
                data: eval(data)
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            legend: {
                labels: {
                    fontColor: 'black',
                }
            },
            animation:{
                easing:"easeInOutBack"
            }
        }
    });
</script>
</body>

</html>
